<template>
  <div>
    <table :class="$style.table">
      <tbody :class="$style.tbody">
        <tr>
          <td :class="$style.title" colspan="10">工艺说明</td>
        </tr>
        <tr v-if="previewImage.length">
          <th :class="[$style.labelTitle, $style.imgPre]" style="height: 400px">
            <img
              v-for="(img, i) in previewImage"
              :key="i"
              v-view-img
              style="width: 100%; height: 100%; object-fit: contain"
              :src="img.ossUrl"
            />
          </th>
        </tr>

        <tr>
          <td :class="$style.value" style="padding: 10px 0">
            <div v-for="(item, i) in craftDes" :key="i">
              {{ i + 1 }} {{ item.craftDesc }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    productId: {
      type: Number,
      default: -1
    },
    bizScene: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      craftDes: [],
      previewImage: []
    }
  },
  mounted() {
    this.loadData()
    this.loadPreviewImage()
  },
  methods: {
    async loadData() {
      try {
        const res = await this.$api.craft.craftDesc({
          productId: this.productId
        })
        this.craftDes = [...res]
      } catch (e) {
        console.error(e)
      }
    },
    async loadPreviewImage() {
      try {
        const res = await this.$api.oss.list({
          bizId: this.productId,
          bizScene: 110,
          bizType: 50
        })

        this.previewImage = res ? res.list : []
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style lang="less" module>
@import './style.less';

.previewImage {
  max-width: 300px;
  margin: 5px;
}
</style>
